import "./index.scss"
import {View, Text} from "@tarojs/components"
import {observer} from "mobx-react"
import {useContext, useEffect, useState} from "react"
import {useDidHide, useDidShow, useRouter} from "@tarojs/taro"
import {devControllStore} from "./model"
// import {uSelectDevControl, exeControlCommand} from '@/api/setting'
// import {ControllBtn} from './components'
import Taro from "@tarojs/taro"
import {AtButton, AtSegmentedControl} from "taro-ui"
import {Auto} from "./module/auto"
import {Hand} from "./module/hand"
import {
	selectAddSetApi,
	editAddSetApi,
	editAutoSetDataApi,
	editManualSetDataApi
} from "@/api/additionConf.ts"

const Devcontroll = () => {
	let router = useRouter()

	const params = router.params

	/* 当前是什么模式的标识   1自动  2手动 */
	const [mode, setMode] = useState(0)

	/* 自动模式的 间隔时间 和 液位值 的字段数据 */
	const [autoFormData, setAutoFormData] = useState({
		intervalTime: 0,
		liquidLevel: 0
	})

	/* 当前设备的setId */
	const [addSetId, setAddSetId] = useState(0)

	/* 当前的自动模式的setDataId */
	const [autoSetDataId, setAutoSetDataId] = useState(0)

	/* 当前的手动模式的setDataId */
	const [manualSetDataId, setManualSetDataId] = useState(0)

	/* 当前模式的间隔时间 */
	const [manualCollectRate, setManualCollectRate] = useState(0)

	/* 当前是雨水还是污水的状态 */
	const [isRainwater, setIsRainwater] = useState(true)

	// const {updatePageQuery, clearPageQuery, pageQuery} = useContext(devControllStore)
	useEffect(() => {
		getCurrentConfFunc()
		console.log(params)
	}, [])

	// 获取当前配置的数据的函数
	const getCurrentConfFunc = async () => {
		console.log(params)

		const res = await selectAddSetApi(params.devGId)
		// const res = await selectAddSetApi(8888)
		console.log(res)
		setMode(res.data.nowStatus - 1)
		setAutoFormData({
			intervalTime: res.data.addAutoSetData.autoCollectRate,
			liquidLevel: res.data.addAutoSetData.limitValue
		})
		setAddSetId(res.data.setId)
		setAutoSetDataId(res.data.addAutoSetData.setDataId)
		setManualSetDataId(res.data.addManualSetData.setDataId)
		setManualCollectRate(res.data.addManualSetData.autoCollectRate)
		setIsRainwater(res.data.nowStatus == 1 ? true : false)
	}

	// 切换模式动画函数
	const checkoutModeAnimateFunc = () => {
		Taro.showLoading({
			title: "切换中",
			mask: true
		})
	}

	// 停止切换模式动画函数
	const stopCheckoutModeAnimateFunc = () => {
		setTimeout(() => {
			Taro.hideLoading()
		}, 500)
	}

	// 发送切换请求的函数
	const checkModeQueryFunc = async (mode: number) => {
		if (!mode) {
			console.log("自动")
		} else {
			console.log("手动")
		}
	}

	// 切换模式的请求函数
	const tabsCheckoutModeFunc = async (status: number) => {
		await editAddSetApi({addSetId: addSetId, nowStatus: status})
			.then(() => {
				Taro.hideLoading()
			})
			.then(() => {
				Taro.showToast({
					title: "切换成功",
					icon: "success",
					duration: 2000
				})
			})
			.catch(() => {
				Taro.showToast({
					title: "切换失败",
					icon: "error",
					duration: 2000
				})
			})
	}

	// 自动和手动模式切换的点击事件
	const tabsClick = (value: number) => {
		// 如果要切换的模式是当前模式，则退出
		if (value == mode) return
		/* 切换提示 */
		Taro.showModal({
			title: "提示",
			content: `确定要切换到${mode == 0 ? "手动" : "自动"}模式吗？`,
			success: function (res) {
				if (res.confirm) {
					checkoutModeAnimateFunc()
					setMode(value)
					// checkModeQueryFunc(value)
					console.log("用户点击确定")
					tabsCheckoutModeFunc(mode == 0 ? 2 : 1)
					// stopCheckoutModeAnimateFunc()
				} else if (res.cancel) {
					console.log("用户点击取消")
				}
			}
		})
	}

	return (
		<View className="container bg-xx_bg">
			<View className="hanzi text-16 font-bold mt-23 mb-14 px-16">附加配置</View>
			<View className="hanzi text-14 text-xx_text mb-14 px-16">
				配置下面的设备相关附加配置
			</View>

			<View className="tag_box">
				当前是
				{isRainwater ? (
					<Text className="rainwater">雨水</Text>
				) : (
					<Text className="sewage">污水</Text>
				)}
				状态
			</View>
			{/* 切换自动和手动的tabs组件 */}
			<View className="tabs_box">
				<AtSegmentedControl values={["自动", "手动"]} onClick={tabsClick} current={mode} />
			</View>
			{mode == 0 ? (
				<View className="hand">
					<Auto
						autoSetDataId={autoSetDataId}
						autoFormData={autoFormData}
						setAutoFormData={setAutoFormData}
						getCurrentConfFunc={getCurrentConfFunc}
					></Auto>
				</View>
			) : (
				<View className="auto">
					<Hand
						manualCollectRate={manualCollectRate}
						setManualCollectRate={setManualCollectRate}
						manualSetDataId={manualSetDataId}
						getCurrentConfFunc={getCurrentConfFunc}
					></Hand>
				</View>
			)}
		</View>
	)
}

export default observer(Devcontroll)
